@import "./../../../assets/scss/index.scss";

//等待时间的等级
$panel-level1:#d92b2b;
$panel-level1-deputy:#991f1f;
$panel-level2:#ff8800;
$panel-level2-deputy:#cc5800;
$panel-level3:#ff8800;
$panel-level3-deputy:#cc5800;
/*$panel-level5*/

$item-header-h:36px;
$item-height:pxTorem(70px);

$panels-padding:pxTorem(4px);
$panels-padding-bottom:pxTorem(4px);
$panel-border:pxTorem(2px);

:host{width: 100%;height: 100%;display: block;background: #1a1a1a;}

[hidden] {
  display: none !important;
}

/*home*/
.panels{height: 100%;position: relative;}
.no-orders{
    font-size: pxTorem(30px);width: 100%;height: 100%;color:white;background:$mpj-primary;
    p{ top:76%;text-align:center;width: pxTorem(1000px);position: absolute;top: 60%;}    
}
    
    
/*order-panels*/
order-panels{height: 100%; padding: ($panels-padding - $panel-border);padding-bottom: ($panels-padding-bottom - $panel-border); box-sizing: border-box;}
.panels-container{
        /*display: -webkit-box;*/
    flex-wrap:wrap;display: flex; flex-direction:column ;justify-content: flex-start;align-content: flex-start;
    height: 100%;width: 100%;overflow-x: scroll;
}

/*order-panel*/
order-panel{
    overflow: hidden; display: block;height: 33.3333%;border: $panel-border solid #1a1a1a;;box-sizing:border-box;opacity:0;
}

@mixin orderPanel{
        //可以滚动
    &.scorll{
        footer{
            .up{display: block;}
            .down{display: block;}
        }
    }

    display: flex;flex-direction:column;height:100%;background:white;
    header{
        font-size: 1em; height: pxTorem($item-header-h);background: $panel-level3;color:white;padding-right:  pxTorem(8px);position:relative;
        .terminal-name{
            text-align: center;box-shadow: 0px 0px 0px 4px $panel-level3;font-size: pxTorem(24px);padding: 0 4px; top: 0;border-radius: 5px;margin: 4px ;  z-index: 99;left: 0;line-height: pxTorem(36px);min-width: pxTorem($item-header-h);position: absolute;background: #333333;color: #ffffff;
        }
        .new{
            background: $mpj-primary; position: absolute;display: none;right:pxTorem(105px);height: 100%;
            .info{display: block;text-align: center;height: pxTorem(36px);line-height: pxTorem(36px);height: 100%;font-size: pxTorem(20px)}
            .triangle-down{
                position: absolute;right: 0;
                width: 0; height: 0;border-left: pxTorem(16px) solid transparent;border-right: pxTorem(16px) solid transparent;border-top: pxTorem(10px) solid $mpj-primary;
            }
        }
        .iconfont{font-size: pxTorem(24px);}
        &.priority-normal{
            background: $panel-level3;
            .new{display: inline-block;font-size: 0;width: pxTorem(32px);}
        }
        &.priority-high{background: $panel-level2;.terminal-name{border-color:$panel-level2;box-shadow: 0px 0px 0px 4px $panel-level2}}
        &.priority-extreme-high{background: $panel-level1;.terminal-name{border-color:$panel-level1;box-shadow: 0px 0px 0px 4px $panel-level1}}
        }
        .customer-identity{padding-left: 0px;}
        .elasped-time{margin-left: pxTorem(8px)}
    article{
        flex: 1;overflow-y:scroll;position: relative;
        .cart-item{
            padding:pxTorem(15px) 0;
            //完成的时候背景色
            &.completed{
                background: #cccccc;
                .done{opacity: 100;transform: scale(1.1);color: #4d4d4d;}
            }
            &.refund{
                .item-info::before{top: 50%;transform: translateY(-50%);border-radius: 4px;right: 0;content: "退";position: absolute;color: white; background: $panel-level1;$h:32px;width: $h;line-height: $h;text-align: center;}
                .item-info .container{position: relative;}
                .item-info .container::after{$h:4px;left: 0;content: "";position: absolute;width: 100%;border-bottom: $h/2 solid $panel-level1;border-top: $h/2 solid $panel-level1;margin-top: 0-$h/2;top: 50%;}
                .done{opacity: 0;}
            }
            //不是本档口
            &.no-localstall{
                border-left: pxTorem(4px) solid $mpj-primary;margin-left: 0;padding-left:0;
            }
            .done{opacity: 0;}
            padding-right: pxTorem(8px); padding-left: pxTorem(4px) ;border-bottom: 1px solid #999999;
            .item-info{
                position: relative; padding-left: pxTorem(4px);font-size:1em;
                .item-qty{
                    text-align: center; display: inline-block;height: pxTorem(24px);line-height: pxTorem(24px);min-width: pxTorem(24px);border-radius: 4px;font-size: pxTorem(20px);
                    &.multiple{background: #4d4d4d;color: white;};
                    &.complete{background: #e6e6e6;}
                };
                .invt-name{
                    padding-left: pxTorem(8px);line-height: 1em;
                    &.span{line-height: 0.6em;}
                }
                i{font-size:24px;margin-left: 12px;}
            }
            .modifier{
                padding-left:1.8rem;
                &>span{
                    font-size:0.9em;margin: 4px 8px;margin-left: 0px;padding: 0px 4px;background: #4d4d4d;color: white;
                    border-radius: 4px;max-width: 100%;display: inline-block;word-break: break-all;
                }
            }
            $complete-h:24px;
            &.first-completed{position: relative;}
            &.first-completed::before{content: "";display: block;width: 100%;height: $complete-h;}
            &.first-completed::after{top: 0;content: "已完成";right: 0;text-align: center; left: 0;height: $complete-h;position: absolute;font-size: 16px;background: #4d4d4d;color: white;}
        }
    }
    footer{
        .remark{line-height: pxTorem(48px);font-size: pxTorem(20px);color: #333333;background: #e6e6e6;padding-left: pxTorem(10px);}
        .btn{        
            //可以出品
            border-top: 1px solid #999999;font-size:pxTorem(24px);
            &.produce{
                .text{color: white;background: $mpj-primary;}
            }
            &.allFinish{
                .text{i{display: inline;vertical-align: middle;color: white;padding-left: pxTorem(4px);vertical-align: text-top;;}}
            }
            &.expand{color: #4d4d4d;}
            button{
                height: pxTorem(48px);
                &.border-r{border-right: 1px solid #999999;}
                &.w{width: pxTorem(48px);}
                &.text{
                    font-size: pxTorem(20px);color: $mpj-primary;
                    i{display: none;}
                }
                i{font-size: pxTorem(26px);color: #4d4d4d;vertical-align: sub;}
                i.active{color: $mpj-primary;}
            }
            .direction{i{font-size: pxTorem(42px);}}
        }
    }
}

.panel-container{ 
    @include orderPanel;

}
/*panel-tabs*/
.tabs-container{
    font-size:pxTorem(28px);
    .arrow{
        background: #303138; 
        /*width: 180px;*/
    }
    .tabs{
        padding: 0 pxTorem(50px);height:100%;
        .tab{line-height: pxTorem(88px);min-width: pxTorem(88px);display: inline-block;padding: pxTorem(5px);}
    }
}